<template>
  <div class="search_panel-wrapper">
    <div
      v-for="(group, groupIndex) in groups"
      :key="groupIndex"
      :class="calcGroupClass(group)"
    >
      <div
        v-for="(item, itemIndex) in group.formItem"
        :key="itemIndex"
        :class="'item-default-class'"
      >
        <slot v-if="item.slot" :name="item.slot" />
        <el-input
          size="small"
          v-if="item.type === 'input'"
          v-model.trim="form[item.value]"
          :class="item.class || ''"
          :placeholder="item.placeholder || calcPlaceHolder(item)"
          v-bind="item"
        />
        <div v-if="item.type === 'radio'" v-bind="item">
          <span>{{ `${item.label}：` }}</span>
          <el-radio-group v-model="form[item.value]">
            <el-radio
              v-for="option in item.options"
              :key="option.label"
              :label="option.label"
            >
              {{ option.text }}
            </el-radio>
          </el-radio-group>
        </div>
        <el-select
          size="small"
          v-if="item.type === 'select'"
          v-model.trim="form[item.value]"
          :class="item.class || ''"
          :placeholder="item.placeholder || calcPlaceHolder(item)"
          v-bind="item"
        >
          <el-option
            v-for="optionItem in item.options"
            :key="optionItem.value"
            :label="optionItem.label"
            :value="optionItem.value"
          />
        </el-select>
        <RangeDatePicker
          v-if="item.type === 'rangeDatePicker'"
          :flex-direction="item.flexDirection"
          @picker-change="
            (dateRange) => {
              handleDatePickerChange(item.value, dateRange)
            }
          "
          :class="item.class"
        />
        <el-button
          v-if="item.type === 'submit'"
          @click="submit"
          icon="el-icon-search"
          class="search-panel-button-green"
        >
          {{ item.label ? item.label : '搜索' }}
        </el-button>
        <el-button
          v-if="item.type === 'button'"
          @click="item.click"
          :icon="item.icon"
          :class="item.class"
        >
          {{ item.label }}
        </el-button>
        <HycAddressCascader
          v-if="item.type === 'address'"
          @input="
            (address) => {
              handleAddressChange(item.value, address)
            }
          "
          size="small"
          clearable
        />
      </div>
    </div>
  </div>
</template>
<script>
import RangeDatePicker from '../RangeDatePicker'
import HycAddressCascader from '../hycAddressCascader'
export default {
  name: 'SearchPanel',
  inheritAttrs: false,
  components: {
    RangeDatePicker,
    HycAddressCascader,
  },
  props: {
    groups: {
      type: Array,
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    handleAddressChange(value, address) {
      console.log(address)
      this.form[value] = address
    },
    handleDatePickerChange(value, dateRange) {
      this.form[value] = dateRange
    },
    calcGroupClass(group) {
      let classStr = 'group-wrapper'
      if (group.hasDivider) classStr += ' group-wrapper-divider'
      if (group.horizontal) classStr += ' group-wrapper-group__horizontal'
      else classStr += ' group-wrapper-group__vertical'
      if (group.class) classStr += ` ${group.class}`
      return classStr
    },
    calcPlaceHolder(item) {
      return item.label
    },
    submit() {
      this.$emit('submit', this.form)
    },
  },
}
</script>
<style lang="scss" scoped>
.search_panel-wrapper {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 4px;
  border: none;
  color: #100625;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;

  .group-wrapper-divider {
    border-right: 1px solid #eff2f7;
  }

  .group-wrapper-group__horizontal {
    display: flex;

    div {
      margin-right: 25px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .group-wrapper-group__vertical {
    .item-default-class {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0px;
      }
    }
  }

  .group-wrapper {
    padding: 0 15px;
  }
}
</style>
